<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <!--1.最基本的列表-->
    <ul>
        <li v-for="item in items"> {{item.message}}</li>
    </ul>
    <!--2.列表显示索引-->
    <hr>
    <ul>
        <li v-for="(item, index) in items">
             {{ index }} - {{ item.message }}
        </li>
    </ul>
    <hr>
    <!--3.循环对象 取出他的值-->
    <ul>
        <li v-for="(value) in obj">{{value}}</li>
    </ul>
    <!--4.循环取出键和值-->
    <hr>
    <div v-for="(value,name) in obj">{{name}}::{{value}}</div>

    <!--5.循环取出索引-->
    <div v-for="(value, name, index) in obj">
        {{ index }}. {{ name }}: {{ value }}
    </div>
    <hr>
    <div v-for="n in numbers">{{n}}</div>
    <hr>
    <!--过滤器-->
    <!--取出列表的偶数-->
    <ul>
        <li v-for="num in evenNumber">{{num}}</li>
    </ul>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            items:[{message:"Foo"},{message:"Bar"}],
            obj:{
                title:"西游记",
                author:"吴承恩",
                publishAt:"2010-09-08"
            },
            numbers:[1,2,3,4,5]
        },
        methods:{

        },
        computed:{
            evenNumbers:function () {
                return this.numbers.filter(function (number) {
                    return number%2  ===0;
                });
            }
        },
    });
</script>
</body>
</html>
